<template>
	<view class="">
		<view style="background-color: #fff;border-top:1px solid rgb(0 0 0/13%)">
			<u-grid :border="true" @click="click" col="3">
				<u-grid-item>
					<view class="count">
						<text>{{countList.total}}</text>
					</view>
					<text class="grid-text">设备总数</text>
				</u-grid-item>
				<u-grid-item>
					<view class="count">
						<text>{{countList.online}}</text>
					</view>
					<text class="grid-text">在线设备</text>
				</u-grid-item>
				<u-grid-item>
					<view class="count">
						<text>{{countList.offline}}</text>
					</view>
					<text class="grid-text">离线设备</text>
				</u-grid-item>
				<u-toast ref="uToast"></u-toast>
			</u-grid>
		</view>
		<view class="list">
			<!-- <p>设备列表</p> -->
			<list-view>
				<list-item v-for="(item,index) in dataList" :key="index">
					<view class="card" @click="dtn(item.deviceId)">
						<view class="header">
							<view class="device-name">
								<u-icon style="width: 10%;float:left;" name="checkmark-circle-fill"
									:color="isOnline = item.status==='在线'?'#5fe715':'#e7e7e7'" size="24"></u-icon>
								<p style="display:inline-block;width: 80%;height: 100%;float: left;font-size: 36rpx;">
									{{item.deviceName}}
								</p>
								<u-icon name="more-dot-fill" color="#2979ff" size="28"></u-icon>
							</view>
							<p>地址码：{{item.deviceId}}</p>
							<p>项目：{{item.deptName}}</p>
						</view>
						<view class="footer">
							<u-scroll-list :indicator="true" indicatorWidth="0">
								<view class="yinzi">
									<p>PM2.5</p>
									<p class="factor">{{item.pmTwoFive}}</p>
								</view >
								<view  class="yinzi">
									<p>PM10</p>
									<p class="factor">{{item.pmTen}}</p>
								</view >
								<view  class="yinzi">
									<p>噪声</p>
									<p class="factor">{{item.zaosheng}}</p>
								</view >
								<view  class="yinzi">
									<p>温度</p>
									<p class="factor">{{item.wendu}}</p>
								</view >
								<view  class="yinzi">
									<p>湿度</p>
									<p class="factor">{{item.shidu}}</p>
								</view >
								<view  class="yinzi">
									<p>风力</p>
									<p class="factor">{{item.fengli}}</p>
								</view >
								<view  class="yinzi">
									<p>风速</p>
									<p class="factor">{{item.fengsu}}</p>
								</view >
								<view  class="yinzi">
									<p>风向(8)</p>
									<p class="factor">{{item.fengxiangDangWei}}</p>
								</view >
								<view  class="yinzi">
									<p>风向</p>
									<p class="factor">{{item.fengxiang}}</p>
								</view >
								<view  class="yinzi">
									<p>大气压</p>
									<p class="factor">{{item.daqiya}}</p>
								</view >
							</u-scroll-list>
						</view>
					</view>
				</list-item>
			</list-view>
		</view>

	</view>

</template>

<script>
	import indexApi from "@/api/index.js"
	export default {
		name: "placeList",
		data() {
			return {
				isOnline: '#5fe715',
				
			}
		},
		props: ['dataList', 'countList'],
		onLoad() {
			
		},
		watch: {
			
		},
		methods: {
			click(name) {
				if (name === 0) {
					this.$emit('update', '');
				} else if (name === 1) {
					this.$emit('update', '在线');
				} else {
					this.$emit('update', '离线');
				}
			},
			dtn(e) {
				uni.navigateTo({
					url: '/pages/conditionList/conditionList?deviceId=' + e
				})
			},
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}

	.count {
		width: 100rpx;
		height: 60rpx;
		border-radius: 20px;
		text-align: center;
		line-height: 60rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}

	.list {
		padding: 22rpx 20rpx 0;
	}

	.header {
		line-height: 60rpx;
		font-size: 28rpx;
		color: #333336;
	}

	.li {
		background: #FFFFFF;
	}

	.card {
		height: 330rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0px 1px 5px 1px rgba(194, 194, 194, 0.16);
	}

	.card .header {
		height: 176rpx;
		background: #FFFFFF;
	}

	.card .device-name {
		height: 32px;
	}

	.factor {
		font-weight: 600;
		color: #49ac0f;
	}

	.footer {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.footer .yinzi {
		list-style: none;
		float: left;
		width: 140rpx;
		height: 90rpx;
		margin-right: 50rpx;
		padding-top: 6rpx;
		text-align: center;
		background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		border-radius: 16rpx;
	}

	.footer .yinzi p {
		width: 100%;
		padding: 5rpx 0 0;
	}
</style>